import React, { Component } from 'react'

// 非受控组件适合不需要传值的场景，组件内部自己使用；如果需要传值，跨组件使用，则使用受控组件，和状态值绑定
export default class App extends Component {
    state = {
        userName: 'Mr.Liu'
    }
    render() {
        return (
            <div>
                <h1>登录页</h1>
                {/* onChange事件在react中和原生js中的input事件是相同的 */}
                {/* react要自己实现双向绑定这两个步骤加起来相当于vue中的v-model */}
                <input type='userName' value={this.state.userName}
                    onChange={(evt) => {
                        this.setState({
                            userName: evt.target.value
                        })
                    }} />

                <button onClick={() => {
                    console.log(this.state.userName);
                }}>登录</button>
                <button onClick={() => {
                    this.setState({ userName: '' })
                }}>重置</button>
            </div>
        )
    }
}
